//查询所有试卷类别
<template>
  <div class="papercategory">
    <!-- 查询框 -->
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.name" placeholder="请输入试卷分类名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" :disabled="refreshState==0" type="success" icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <el-row>
      <el-button @click="newAddClass(),findFid()"   type="primary">新增试卷分类</el-button>
      <!--// :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
      <el-button type="primary" @click="batchDelect" :disabled="this.sels.length === 0">批量删除</el-button>
    </el-row>
    <!-- 表单 -->
    <el-table :data="pagination"  @selection-change="handleSelectionChange"> border>
      <el-table-column fixed="left" 
      type="selection"
      width="55">
      </el-table-column>
      <el-table-column prop="fakeId" label="序号" width="180"></el-table-column>
      <el-table-column prop="category" label="试卷名称分类" width="250"></el-table-column>
      <el-table-column prop="creator" label="创建人" width="200"></el-table-column>
      <el-table-column prop="update_time" label="最新修改时间" width="280"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row.id)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteRecord(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 handleSizeChange 每页几条，  handleCurrentChange 当前页，current-page	当前页数，支持 .sync 修饰符	， page-size每页显示条目个数，支持 .sync 修饰符-->
    <!-- :current-page.sync当前页 -->
    <el-pagination
      :current-page.sync="currentPage"
      @current-change="handleCurrentChange"
      :hide-on-single-page="hidePagination"
      :page-size="5"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
    <!-- 编辑对话框-->
    <el-dialog
      title="编辑试卷分类"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="试卷名称分类">
            <el-input v-model="form.category"></el-input>
          </el-form-item>
          <!-- <el-form-item label="父级分类">
            <el-input v-model="form.fid"></el-input>
          </el-form-item> -->
          <el-form-item label="父级分类">
            <el-select v-model="id" placeholder="请选择">
              <el-option
                v-for="item in fids"
                :key="item.id"
                :label="item.category"
                :value="item.id">
                <span style="float: left" >{{ item.category }}</span>
                <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span> -->
              </el-option>
            </el-select>
          </el-form-item>          
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submit(form.id)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增试卷分类 -->
    <el-dialog
      title="新增试卷分类"
      :visible.sync="paperclassVisible"
      width="30%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="试卷名称分类">
            <el-input v-model="form.category"></el-input>
          </el-form-item>
          <el-form-item label="父级分类">
            <el-select v-model="id" placeholder="请选择">
              <el-option
                v-for="item in fids"
                :key="item.id"
                :label="item.category"
                :value="item.id">
                <span style="float: left" >{{ item.category }}</span>
                <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span> -->
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="父级分类">
            <el-input v-model="form.fid"></el-input>
          </el-form-item>           -->
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitPaperClass()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {}, //保存点击以后当前试卷的信息
      pagination: [

        ],
      formInline: {
      name:"",
      status:"",
      page: 1,
      limit: 5,
      },
      currentPage:1,
      pageSize:5,
      total:1,
      hidePagination:false,
      searchCode:0,//判断是在findAll状态，还是在搜索状态进行操作
      searchPageCode:0,//为了在搜索状态下，对搜索出的结果进行页面跳转判断
      dialogVisible: false,
      paperclassVisible: false,
      sels: [],
      //新增类别的父类选择
      fids: [],
      id: '',
      //重置键是否可用
      refreshState:0

    }
  },
  created() {
    this.findAll()
  },
  methods: {
    //start
    findAll(){
      this.$axios.get('/api/paper_category/findAll/'+this.currentPage+'/'+this.pageSize)
        .then(res => {
          this.pagination = res.data.data.list
          this.total=res.data.data.total
          this.hidePagination=true
          
        })
        .catch(err => {
          
        })
      
    }, 
    cancel(){//取消按钮
      this.paperclassVisible = false;//隐藏新增弹窗
      this.dialogVisible = false;//隐藏编辑弹窗
      this.id='';//把已经选择的id还原为空的初始状态
      this.form={};//把已经选择的form还原为空的初始状态

    },
     //查找新增类别的父类选择
    findFid(){
      this.$axios.get('/api/paper_category/findFid')
        .then(res => {
          this.fids = res.data.data
          console.log("this.ids",this.fids);
        })
        .catch(err => {
          
        })
    },
    
    // getPaperClassInfo() { //根据页码，查询所有试卷分类
    //   this.$axios(`/api/paper_category/findAll/${this.pagination.current}/${this.pagination.size}`).then(res => {
    //     this.pagination = res.data.data
    //   }).catch(error => {
    //   })
    // },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.currentPage=val
      let currentPage=this.currentPage
      let code= this.searchCode
      //console.log(`当前页: ${currentPage}`);
      if (code==1) {
        this.searchPageCode=1;
        this.search();
      } else {
        this.findAll();
      }
    },
    edit(classCode) { //编辑试卷之前进行查询
      this.findFid(classCode);//为编辑的下落框赋值
      this.dialogVisible = true
      this.$axios({
        url:'/api/paper_category/updateBefore',
        method:'post',
        data: {
          id:`${classCode}`,
        }

      }).then(res => { //根据试卷类别id请求后台
        if(res.data.code == 200) {
          this.form = res.data.data
          this.id=this.form.fid;//把已经选择的fid赋给下拉框的初始状态
          
        }       
      })
    },
    handleClose(done) { //关闭提醒
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        }).catch(_ => {});
    },
    submit(classId) { //提交修改后的试卷类别信息
      this.dialogVisible = false;
      this.form.fid=this.id;//把修改后的fid给它
      
      this.$axios({
        url:'/api/paper_category/updateclass',
        method:'post',
        data: {
          id:`${classId}`,
          ...this.form
        }
      }).then(res => {
        if(res.data.code == 200) {
          this.$message({ //成功修改提示
            message: '更新成功',
            type: 'success'
          })
        }
        
        let code= this.searchCode
        //console.log("编辑code",code)
        if (code==1) {
          this.search();
        } else {
          this.findAll();
        }
      })
      this.id='';//把已经选择的id还原为空的初始状态
      this.form={};//把已经选择的form还原为空的初始状态
    },
    deleteRecord(classCode) {
      this.$confirm("确定删除该记录吗,该操作不可逆！！！","删除提示",{
        confirmButtonText: '确定删除',
        cancelButtonText: '算了,留着',
        type: 'danger'
      }).then(()=> { //确认删除
        this.$axios({
          url: `/api/paper_category/delete/${classCode}`,
          method: 'get',
        }).then(res => {
          let code= this.searchCode
          //console.log("编辑code",code)
          if (code==1) {
            this.search();
          } else {
            this.findAll();
          }
        })
      }).catch(() => {

      })
    },

    // 新增试卷分类
    newAddClass(){
      this.paperclassVisible = true   //让新增表单出现
    }, 
    submitPaperClass() { //提交新增的试卷类别信息
      if (this.form.category==null) {
        this.$message({ //成功添加提示
              message: '分类名称不能为空',
              type: 'warning'
            })
      } else {
        this.paperclassVisible = false
        /* console.log(this.form.fid);
         console.log(this.value);*/
        this.form.creator=JSON.parse(window.localStorage.getItem('userdata')).username;
        console.log("用户名",this.form.creator)
     
        this.form.fid=this.id
        //console.log("表格",this.form);
        this.$axios({
          url:'/api/paper_category/insertclass',
          method:'post',
          data: {
            ...this.form
          }
        }).then(res => {
          if(res.data.code == 200) {
            this.$message({ //成功添加提示
              message: '添加成功',
              type: 'success'
            })
          }
          //让id重新变为空的状态
          this.id='';
          //在正常情况下新增，在搜索情况下添加
          let code= this.searchCode
          //console.log("编辑code",code)
          if (code==1) {
            this.search();
          } else {
            this.findAll();
          }
        })
      }
      

    },
    //批量删除
    //获取选中的值
   handleSelectionChange(sels) {
     this.sels = sels;
     //console.log("选中的值",sels.map((item) => item.id));
   },
   //批量删除执行操作
   batchDelect() {
     // 删除前的提示
     this.$confirm("确认删除记录吗?", "提示", {
       type: "warning",
     }).then(() => {
       let ids = this.sels.map((item) => item.id);
       //console.log(ids); //[1,2,3,4]
       /* 根据后台想要的参数格式选择
   		  console.log(ids.join(",")); //1,2,3,4
          console.log(ids); //[1,2,3,4]
       */
       // 请求接口
       
      this.deleteVehiclds(ids)
     
     });
   },
   deleteVehiclds(ids) {     
      //console.log("批量删除",ids);
      let nums=[]
      //console.log("批量删除2",nums);
      for (var i = 0; i < ids.length; i++) {
        nums.push(ids[i]);
        //console.log("批量删除4",nums);
      }
      
      this.$axios({
        url:`/api/paper_category/batchdelete`,
        method:'post',
        data: {
          nums
        }
      }).then(res => {
        if(res.data.code == 200) {
          this.$message({ //成功修改提示
            message: '批量删除成功',
            type: 'success'
          })
          nums=[]//清空
          let code= this.searchCode
          //console.log("编辑code",code)
          if (code==1) {
            this.search();
          } else {
            this.findAll();
          }
        }
      })
      
    },
    search(){//搜索
      let category= this.formInline.name
      if (category.length == 0) {
        this.$message({ //成功添加提示
              message: '搜索内容不能为空',
              type: 'warning'
            })
      } else {
        //如果this.searchPageCode=1，说明这是在搜索状态下进行页面跳转，需要传送当前当前具体的页码
        if (this.searchPageCode==1) {
          this.$axios({
            url:`/api/paper_category/searchclass`,
            method:'post',
            data: {
              category:`${category}`,
              currentPage:`${this.currentPage}`,
              pageSize:`${this.pageSize}`

            }
          }).then(res => {
            if(res.data.code == 200) {
              this.$message({ //查找成功提示
                message: '查找成功',
                type: 'success'
              })
              this.searchPageCode=0;//确保下次搜索时，curuntPage仍然在第一页
              this.searchCode = 1;
              this.pagination = res.data.data.list
              this.total=res.data.data.total
              this.hidePagination=true
              this.refreshState=1
              
            }else{
              this.$message({ //查找成功提示
                message: '查找失败',
                type: 'warning'
              })
            }
          })
        } else {
          this.$axios({
            url:`/api/paper_category/searchclass`,
            method:'post',
            data: {
              category:`${category}`,
              currentPage:1,
              pageSize:`${this.pageSize}`

            }
          }).then(res => {
            if(res.data.code == 200) {
              this.$message({ //查找成功提示
                message: '查找成功',
                type: 'success'
              })
              this.currentPage=1;//让搜索出来的结果位于第一页
              this.searchCode = 1;
              this.pagination = res.data.data.list;
              this.total=res.data.data.total;
              this.hidePagination=true;
              this.refreshState=1;
            }else{
              this.$message({ //查找成功提示
                message: '查找失败',
                type: 'warning'
              })
            }
          })
        }
        
      }
    },
    reset(){//重置
      this.refreshState=0
      this.searchCode = 0
      this.formInline.name=null//让搜索框变为空
      this.findAll()

    }
   
  //end   
  },
};
</script>
<style lang="scss" scoped>
.papercategory {
  padding: 0px 40px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edit{
    margin-left: 20px;
  }
}
</style>
